<template>
<transition name="fade">
  <div class="box">
    <header class="cart-header">
      <router-link tag="span" :class="item.icon" :to="item.path" v-for="(item, index) of list" :key="index"></router-link>
      <span>购物车</span>
    </header>
    <div class="cart-content">
      <div class="cart-content-top">
        <ul>
          <li v-for="(items, idx) of cartlist" :key="idx">
          <span><input type="checkbox"/></span>
          <img :src="items.pimg" alt=""/>
          <div class="cartinfo">
            <p>{{items.pname}}</p>
            <p>{{items.pdesc}}</p>
            <p>{{items.psize}}{{items.pcolor}}</p>
            <p><i>￥{{items.pprice}}</i><i>x{{items.pnum}}</i></p>
          </div>
          </li>
        </ul>
      </div>
      <div class="cart-content-bottom">
        <div class="cart-content-bottom-txt">
          <span>宝宝可能还需要</span>
        </div>
        <ol class="cart-content-bottom-ol">
          <li v-for="(needitem, proidx) of needlist" :key="proidx">
              <div class="pro">
                <img :src="needitem.pimg"/>
              </div>
              <p>{{needitem.pname}}</p>
              <p>￥{{needitem.pprice}}</p>
          </li>
        </ol>
      </div>
    </div>
    <ul class="cart-bottom">
      <li><input type="checkbox"/></li>
      <li>全选</li>
      <li><span>合计</span><span>￥</span></li>
      <li><span>结算</span><span>(0)</span></li>
    </ul>
  </div>
</transition>
</template>

<script>
import Vue from 'vue'
import { Swipe, SwipeItem, Lazyload } from 'mint-ui'
Vue.use(Swipe, SwipeItem, Lazyload)
export default {
  data () {
    return {
      list: [
        {
          path: '/mine',
          icon: 'iconfont icon-fanhui2'
        }
      ],
      needlist: [
        {
          pimg: 'https://img.alicdn.com/bao/uploaded/i2/2786613670/TB2elnop5AnBKNjSZFvXXaTKXXa_!!2786613670.jpg',
          pname: '益智不倒玩具',
          pdesc: '锻炼小手灵活度',
          psize: '100*100',
          pcolor: '蓝色',
          pprice: '29.9',
          pnum: '1'
        },
        {
          pimg: 'https://img.alicdn.com/bao/uploaded/i4/853295102/TB2H8g1zVGWBuNjy0FbXXb4sXXa_!!853295102-0-item_pic.jpg',
          pname: '益智不倒玩具',
          pdesc: '锻炼小手灵活度',
          pprice: '29.9'
        },
        {
          pimg: 'https://img.alicdn.com/bao/uploaded/i3/713563482/TB2bLB1l5MnBKNjSZFzXXc_qVXa_!!713563482.jpg',
          pname: '益智不倒玩具',
          pdesc: '锻炼小手灵活度',
          pprice: '29.9'
        },
        {
          pimg: 'https://img.alicdn.com/bao/uploaded/i1/754088696/O1CN01DzWG0E2E6ofmKGWku_!!754088696.jpg',
          pname: '益智不倒玩具',
          pdesc: '锻炼小手灵活度',
          pprice: '29.9'
        },
        {
          pimg: 'https://img.alicdn.com/bao/uploaded/i1/3006779062/O1CN012GoRcPDbIRnOrjq_!!3006779062.jpg',
          pname: '益智不倒玩具',
          pdesc: '锻炼小手灵活度',
          pprice: '29.9'
        },
        {
          pimg: 'https://img.alicdn.com/bao/uploaded/i2/1707096393/O1CN01pBTLhR1x62X6zYsxo_!!1707096393.jpg',
          pname: '益智不倒玩具',
          pdesc: '锻炼小手灵活度',
          pprice: '29.9'
        }
      ],
      cartlist: [
        {
          pimg: 'https://img.alicdn.com/bao/uploaded/i4/2335969901/TB2bLACprorBKNjSZFjXXc_SpXa_!!2335969901.jpg',
          pname: '益智不倒玩具',
          pdesc: '锻炼小手灵活度',
          pprice: '29.9',
          psize: '100*100',
          pcolor: '蓝色',
          pnum: '1'
        },
        {
          pimg: 'https://img.alicdn.com/imgextra/i2/48880015/O1CN011ByuPHI9NZbpLbQ_!!0-saturn_solar.jpg_220x220.jpg',
          pname: '益智不倒玩具',
          pdesc: '锻炼小手灵活度',
          pprice: '29.9',
          psize: '100*100',
          pcolor: '蓝色',
          pnum: '1'
        },
        {
          pimg: 'https://img.alicdn.com/bao/uploaded/i4/2777296790/TB22wbzxiMnBKNjSZFCXXX0KFXa_!!2777296790.jpg',
          pname: '益智不倒玩具',
          pdesc: '锻炼小手灵活度',
          pprice: '29.9'
        },
        {
          pimg: 'https://img.alicdn.com/bao/uploaded/i1/1971614266/O1CN011hNs58yPy8ubVdH_!!1971614266.jpg_30x30.jpg',
          pname: '益智不倒玩具',
          pdesc: '锻炼小手灵活度',
          pprice: '29.9',
          psize: '100*100',
          pcolor: '蓝色',
          pnum: '1'
        },
        {
          pimg: 'https://img.alicdn.com/bao/uploaded/i2/1757850360/TB2Yn2KnGQoBKNjSZJnXXaw9VXa_!!1757850360.jpg',
          pname: '益智不倒玩具',
          pdesc: '锻炼小手灵活度',
          pprice: '29.9',
          psize: '100*100',
          pcolor: '蓝色',
          pnum: '1'
        },
        {
          pimg: 'https://img.alicdn.com/bao/uploaded/i2/2455120832/TB2qjFxlhTI8KJjSspiXXbM4FXa_!!2455120832.jpg',
          pname: '益智不倒玩具',
          pdesc: '锻炼小手灵活度',
          pprice: '29.9',
          psize: '100*100',
          pcolor: '蓝色',
          pnum: '1'
        }
      ]
    }
  }
}
</script>

<style lang="scss">
// 头部
.cart-header{
  width:3.75rem;
  height:0.42rem;
  line-height:0.42rem;
  background:rgb(236, 234, 234);
  text-align: center;
  span{
    &:nth-child(1){
     font-size:0.15rem;
     float:left;
     margin-left:0.15rem;
     font-weight: 700;
    };
    &:nth-child(2){
      display:block;
      font-size:0.14rem;
      float:left;
       margin-left:1.3rem;
    }
  }
}
.cart-content{
    flex:1;
    position: relative;
    overflow-y:auto;
    // 购物车商品展示
  .cart-content-top{
    width:3.75rem;
    min-height:1.43rem;
    background:0;
    ul{
      width:100%;
      height:100%;
      li{
        width:3.75rem;
        height:1.43rem;
        background:0;
        box-sizing: border-box;
        border-bottom:1px solid #ccc;
        span{
          float:left;
          margin-left:0.15rem;
          margin-top:0.62rem;
          input{
            width:0.16rem;
            height: 0.16rem;
          }
        }
        img{
          float:left;
          width:1rem;
          height:1rem;
          border-radius: 0.1rem;
          margin-left:0.1rem;
          margin-top:0.18rem

        }
        .cartinfo{
          float:left;
          width:2rem;
          height:1rem;
          display:flex;
          flex-direction: column;
          justify-content:space-between;
          background:0;
          margin-top:0.18rem;
          margin-left:0.05rem;
          padding:0;
          p{
            width:100%;
            height:0.25rem;
            line-height: 0.25rem;
            text-align: left;
            padding-left: 0.1rem;
            &:nth-child(1),&:nth-child(2){
              font-size:0.14rem
            }
            &:nth-child(3){
              font-size:0.12rem
            }
            &:nth-child(4){
              font-size:0.1rem;
              display: flex;
              justify-content: space-between;
              padding-right:0.15rem

            }
          }

        }
      }
    }
  }
  // 推荐商品展示
  .cart-content-bottom{
    overflow-y:scroll;
    display:block;
    min-height:5.36rem;
    background:#F9F9F9;
    .cart-content-bottom-txt{
      display: flex;
      justify-content: space-around;
      align-items: center;
      width:0.98rem;
      height:0.2rem;
      margin-top:0.28rem;
      margin-left:1.38rem;
      font-size:0.14rem;
    }
    .cart-content-bottom-ol{
      width:3.46rem;
      min-height:2.26rem;
      background:0;
      margin-left:0.15rem;
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
      li{
        width:1.153rem;
        height:1.15rem;
        background:0;
        margin-top:0.19rem;
        padding-left:0.15rem;
      .pro{
           width:0.86rem;
           height:0.86rem;
           background:rgb(155, 38, 25);
           img{
               width:100%;
               height:100%
             }
          }
      p:nth-of-type(1){
           height:0.16rem;
           line-height:0.16rem;
           font-size:0.12rem;
      }
      p:nth-of-type(2){
          height:0.13rem;
          line-height:0.13rem;
          font-size:0.10rem;
        }
      }
    }
  }
}
.cart-bottom{
  width:3.75rem;
  height:0.5rem;
  background:#F9F9F9;
  position:fixed;
  bottom:0;
  left:0;
  li{
    height:100%;
    width:0.8rem;
    display: flex;
    align-items: center;
    float:left;
    font-family: PingFangSC-regular;
    font-size:0.14rem;
    line-height:100%;
    &:nth-child(1){
      background:0;
      margin-left:0rem;
      width:0.5rem;
      input{
        width:0.21rem;
        height:0.21rem;
        margin-left:0.15rem;
        padding-right:0.09rem
      }
    }
    &:nth-child(2){
      width:0.28rem;
    }
    &:nth-child(3){
      margin-left:1.24rem;
      width:0.56rem;
      display: flex;
      justify-content: space-between;
    }
    &:nth-child(4){
      margin-left:0.22rem;
      width:0.95rem;
      display: flex;
      justify-content: space-around;
      background:rgb(250, 182, 122);
      font-size: 0.18rem;
      color: rgb(255, 255, 255);
    }
  }
}
</style>
